<template>
  <div>
    <div class="mesHeader flex flex-j-s-b">
      <!-- 左侧区域 -->
      <div class="flex flex-a-c">
        <img class="mesLogo" src="@/images/header/yunLogo.png" />
        <div class="mesTitle">云车间管理系统</div>
      </div>
      <headModal ref="headModal"></headModal>
      <previewImage ref="previewImage" />
      <!-- 右侧区域 -->
      <div class="userInfo flex flex-a-c">
        <a-switch 
          :style="IconStyle" 
          checked-children="菜单折叠" 
          un-checked-children="菜单展开"
          v-model="switchValue" 
          @change="switchChange" 
        />
        <a-icon :style="IconStyle" @click="handleSkin" type="skin" />
        <a-icon
          v-if="!fullscreen"
          :style="IconStyle"
          type="fullscreen"
          @click="isScreenFull"
        />
        <a-icon
          v-else
          :style="IconStyle"
          type="fullscreen-exit"
          @click="isScreenFull"
        />
        <!-- <a-icon type="bell" :style="IconStyle" /> -->
        <a-icon type="setting" :style="IconStyle" @click="handleUpdatePass" />
        <a-icon type="user" :style="IconStyle" v-if="userInfo.pic == ''" />
        <img
          v-else
          class="userLogo"
          :src="userInfo.pic"
          @click="handlePreviewImage(userInfo.pic)"
        />
        <div class="userTitle">{{ userInfo.name }}</div>
        <div class="userType">{{ userInfo.roleName }}</div>
        <a-divider type="vertical" />
        <div class="loginOut" @click="handleLoginOut">退出登录</div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/apiServer";
import screenfull from "screenfull";
import headModal from "./components/headModal.vue";
import previewImage from "@/components/previewImage/index.vue";
import { createNamespacedHelpers } from "vuex";
const { mapMutations } = createNamespacedHelpers("mes/");
import store from "@/store/index";
export default {
  components: { headModal, previewImage },
  data() {
    return {
      IconStyle: {
        color: "#fff",
        margin: "0 12px",
        fontSize: "16px",
      },
      userInfo: {},
      switchValue: false,
    };
  },
  activated() {
    let userInfo = JSON.parse(localStorage.getItem("userInfo"));
    if (userInfo) {
      this.userInfo = userInfo;
    }
    this.$forceUpdate();
  },
  computed: {
    GLOBAL_THEME() {
      return this.$store.state.mes.GLOBAL_THEME;
    },
    fullscreen() {
      return this.$store.state.mes.fullscreen;
    },
  },
  created() {
    let userInfo = JSON.parse(localStorage.getItem("userInfo"));
    if (userInfo) {
      this.userInfo = userInfo;
    }
    let switchValue = localStorage.getItem('switchValue')
    if(switchValue && switchValue == 2) {
      this.switchValue = false
    } else {
      this.switchValue = true
    }
  },
  methods: {
    ...mapMutations(["changeGlobalTheme", "SetMesFullScreen"]),
    // 换肤
    handleSkin() {
      if (this.GLOBAL_THEME === "dark") {
        console.log(111);
        this.changeGlobalTheme("light");
      } else {
        console.log(222);
        this.changeGlobalTheme("dark");
      }
    },
    handleUpdatePass() {
      this.$refs.headModal.showModal();
    },
    handlePreviewImage(previewImage) {
      this.$refs.previewImage.showModal(previewImage);
    },
    handleLoginOut() {
      const that = this;
      this.$confirm({
        okText: "确认",
        cancelText: "取消",
        content: "确认退出系统？",
        onOk() {
          that.LoginOut();
        },
        cancelText: "取消",
        onCancel() {},
      });
    },
    async LoginOut() {
      const res = await api.LoginOut();
      let userName = localStorage.getItem("userName");
      let password = localStorage.getItem("password");
      let state = localStorage.getItem("state");
      localStorage.clear();
      localStorage.setItem("userName", userName);
      localStorage.setItem("password", password);
      localStorage.setItem("state", state);
      this.$router.push("/login");
    },
    KeyDown(event) {
      if (event.keyCode === 122) {
        event.returnValue = false;
        this.SetMesFullScreen(!this.fullscreen);
        this.isScreenFull(); //触发全屏的方法
      }
    },
    //全屏方法
    isScreenFull() {
      if (!screenfull.isEnabled) {
        return false;
      }
      // 这个方法会请求全屏，如果当前是全屏则会退出全屏。
      // 无需自己再判断当前屏幕状态
      this.SetMesFullScreen(!this.fullscreen);
      screenfull.toggle();
    },
    // 切换侧边导航栏模式
    switchChange(value) {
      this.switchValue = value
      let switchValue = value==true?1:2
      localStorage.setItem('switchValue', switchValue);
      let menuArr = JSON.parse(localStorage.getItem("menuArr"));
      store.commit("menu/saveMenuLists", menuArr);
    }
  },
};
</script>

<style lang="less" scoped>
.mesHeader {
  cursor: pointer;
  line-height: 70px;
  padding: 0 10px;
  .mesLogo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin: 0 17px;
  }
  .mesTitle {
    font-size: 22px;
    font-weight: bold;
    color: #e7eeff;
  }
  .userInfo {
    margin: 0 22px;
    .userLogo {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin: 0 7px;
    }
    .userTitle {
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      margin: 0 8px 0 0;
    }
    .userType {
      height: 18px;
      line-height: 12px;
      padding: 3px 9px;
      background: #00b429;
      border-radius: 2px;
      font-size: 12px;
      font-weight: 400;
      color: #ffffff;
    }
    .loginOut {
      font-size: 14px;
      font-weight: bold;
      color: #ffffff;
    }
  }
}
</style>
